import "./NavBar.scss"
import { scrollTriger } from "@util/index"

const NavBar: React.FC = memo(() => {
  const navDom = useRef<HTMLDivElement>(null)
  const [showMask, setShowMask] = useState(true)

  useEffect(() => {
    if (navDom.current) {
      const navHeight = navDom.current.offsetHeight
      const bind = () => {
        const distanceTop = document.documentElement.scrollTop
        distanceTop > navHeight ? setShowMask(true) : setShowMask(false)
      }
      // 需要先执行一次
      bind()
      // 组件卸载执行
      return scrollTriger(bind)
    }
  }, [])

  return (
    <nav className="nav-bar-com" ref={navDom} style={{ "background": showMask ? "#121212" : "unset" }}>
      <div className="container">
        <p className="logo">LOGO</p>
        <div className="choose-box">
          <a className="intro" href="#home">Home</a>
          <a className="intro" href="#skills">Skills</a>
          <a className="intro" href="#projects">Projects</a>
          <a className="gitee" href="https://gitee.com/ma_zipeng" target="_blank">
            <p>T</p>
          </a>
          <a className="github" href="https://github.com/sishen654" target="_blank">
            <p>G</p>
          </a>
          <div className="connect" onClick={() => { location.replace("#connect") }}>Let&apos;s Connect</div>
        </div>
      </div>
    </nav>
  )
})

export default NavBar
